<template>
  <el-dialog
    class="abow_dialog"
    style="over-flow:scroll"
    :close-on-click-modal="false"
    :title="$t('m.region.chooselocaiton')"
    :visible.sync="dialogVisible"
    width="1170px"
    :before-close="close"
  >
    <el-row :gutter="30" v-loading="loading">
      <el-col :span="6">
        <div class="left">
          <el-form size="mini" label-position="right" label-width="120px" :model="formLabelAlign">
            <el-form-item :label="$t('m.location.identificationcode')">
              <el-input class="upper" v-model="formLabelAlign.identificationcode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.partitioncode')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.partitioncode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.channel')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.channel"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.shelves')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.shelves"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.level')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.level"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.grating')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.grating"></el-input>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button type="primary" size="mini" @click="getLocation">{{$t('m.query')}}</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="18" align="left">
        <div class="right">
          <el-radio-group v-model="locationcode">
            <el-radio
              v-for="(item,index) in locationList"
              :key="index"
              :label="item.locationcode"
            >{{item.locationcode}}</el-radio>
          </el-radio-group>
          <div class="btns" style="margin-top:30px;">
            <el-button size="mini" type="primary" @click="setLocation">{{$t('m.confirm')}}</el-button>
            <el-button size="mini" @click="close">{{$t('m.cancel')}}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  components:{},
  props:['dialogVisible', 'opt', 'saveParams'],
  data(){
    return {
      loading:true,
      locationcode:'',
      formLabelAlign:{
        identificationcode:'',
        partitioncode:'',
        channel:'',
        grating:'',
        level:'',
        shelves:''
      },
      locationcod:'',
      locationList:[]
    }
  },
  watch:{},
  computed:{},
  methods:{
    close(){
      this.$emit('close')
    },
    getLocation(){
      if (this.opt === 'pass'){
        this.$axios({
          method:'get',
          url:`/locationinfo/queryByPartitontype`,
          params:{
            sku:this.saveParams.productspeccode,
            typelist:[1, 2, 3].map(item => item).join(','),
            quantity:this.saveParams.passedqty,
            identificationcode:this.formLabelAlign.identificationcode.toUpperCase(),
            partitioncode:this.formLabelAlign.partitioncode,
            channel:this.formLabelAlign.channel,
            grating:this.formLabelAlign.grating,
            level:this.formLabelAlign.level,
            shelves:this.formLabelAlign.shelves
          }
        }).then(({data})=> {
          this.loading = false
          this.locationList = data
        })
      }
      if (this.opt === 'unpass'){
        this.$axios({
          method:'get',
          url:`/locationinfo/queryByPartitontype`,
          params:{
            sku:this.saveParams.productspeccode,
            typelist:[4, 5].map(item => item).join(','),
            quantity:this.saveParams.unqualifiedqty,
            identificationcode:this.formLabelAlign.identificationcode.toUpperCase(),
            partitioncode:this.formLabelAlign.partitioncode,
            channel:this.formLabelAlign.channel,
            grating:this.formLabelAlign.grating,
            level:this.formLabelAlign.level,
            shelves:this.formLabelAlign.shelves
          }
        }).then(({data})=> {
          this.loading = false
          this.locationList = data
        })
      }
    },
    setLocation(){
      let location = {
        locationid:this.locationList.filter(v => {
          return v.locationcode === this.locationcode
        })[0].locationid,
        locationcode:this.locationcode,
        opt:this.opt
      }
      this.$emit('setLocation', location)
    }
  },
  created(){
    this.getLocation()
  },
  mounted(){}
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.title {
  margin-bottom: 30px;
}
table .el-form-item--mini.el-form-item,
table .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
::v-deep.el-radio {
  width: 130px;
  margin-bottom: 5px;
}
::v-deep.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      height: 80%;
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
::v-deep.abow_dialog {
  .left {
    position: fixed;
    width: 250px;
    top: 10%;
  }
}
::v-deep.abow_dialog {
  .right {
    width: 870px;
    position: absolute;
    right: 0;
    padding-bottom: 30px;
    .btns {
      position: fixed;
      bottom: 10%;
      left: 50%;
    }
  }
}
::v-deep.upper .el-input__inner {
  text-transform: uppercase !important;
}
</style>